<template>
  <section id="experience" class="section">
    <div class="container-full">
      <h2 class="section-title fade-in">工作经历</h2>
      <div class="experience-timeline">
        <div class="timeline-line"></div>
        <div class="experience-items">
          <div
            v-for="(exp, index) in experiences"
            :key="index"
            class="experience-item"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="timeline-node">
              <div class="node-icon">💼</div>
            </div>
            <div class="experience-content">
              <div class="exp-header">
                <div class="exp-meta">
                  <h3 class="exp-company">{{ exp.company }}</h3>
                  <p class="exp-position">{{ exp.position }}</p>
                  <p class="exp-period">{{ exp.period }}</p>
                </div>
              </div>

              <div class="exp-description">
                <h4 class="desc-title">工作描述</h4>
                <p class="desc-text">{{ exp.description }}</p>
              </div>

              <div class="exp-achievements">
                <h4 class="achievements-title">主要成就</h4>
                <ul class="achievements-list">
                  <li v-for="achievement in exp.achievements" :key="achievement">
                    {{ achievement }}
                  </li>
                </ul>
              </div>

              <div class="exp-tech">
                <h4 class="tech-title">技术栈</h4>
                <div class="tech-list">
                  <span
                    v-for="tech in exp.tech"
                    :key="tech"
                    class="tech-badge"
                  >
                    {{ tech }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const experiences = [
  {
    company: '某科技公司',
    position: '高级前端工程师',
    period: '2023.03 - 至今',
    description: '负责公司核心产品的前端架构设计和技术选型，带领5人团队完成多个大型项目的开发和交付。',
    achievements: [
      '重构核心业务系统，性能提升40%',
      '建立前端工程化体系，开发效率提升50%',
      '主导微前端架构改造，支持多团队协作',
      '培养3名初级开发者，提升团队整体水平'
    ],
    tech: ['Vue 3', 'TypeScript', '微前端', 'Vite', 'Jest']
  },
  {
    company: '某互联网公司',
    position: '前端开发工程师',
    period: '2020.07 - 2023.02',
    description: '参与公司电商平台的前端开发，负责移动端H5页面、小程序和后台管理系统的开发。',
    achievements: [
      '开发小程序商城，DAU达到50万+',
      '优化首屏加载时间，减少2秒',
      '实现组件化设计，提高代码复用率',
      '参与技术分享，完成10+内部培训'
    ],
    tech: ['React', '微信小程序', 'Taro', 'Redux', 'Sass']
  },
  {
    company: '某创业公司',
    position: '全栈开发工程师',
    period: '2019.06 - 2020.06',
    description: '作为初创团队核心成员，负责产品从0到1的完整开发，包括前端、后端和数据库设计。',
    achievements: [
      '独立完成SaaS产品开发并成功上线',
      '设计RESTful API，服务10万+用户',
      '实施CI/CD自动化部署流程',
      '建立完善的监控系统，保障服务稳定'
    ],
    tech: ['Vue.js', 'Node.js', 'MongoDB', 'Express', 'Docker']
  }
]
</script>

<style scoped>
.experience-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem 0;
  max-width: 100%;
}

.timeline-line {
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-blue);
  border-radius: 1px;
}

.experience-items {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-left: 5rem;
}

.experience-item {
  position: relative;
  animation: slideInUp 0.6s ease-out both;
}

.timeline-node {
  position: absolute;
  left: -4.5rem;
  top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  z-index: 2;
}

.node-icon {
  width: 30px;
  height: 30px;
  background: var(--accent-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--bg-primary);
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.experience-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2rem;
  transition: all 0.3s;
  width: 100%;
  max-width: 100%;
}

.experience-content:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 5px 15px rgba(0, 217, 255, 0.1);
  transform: translateY(-2px);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.exp-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.exp-company {
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.exp-position {
  color: var(--accent-blue);
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.exp-period {
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  background: rgba(0, 217, 255, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--border-color);
}

.exp-description,
.exp-achievements,
.exp-tech {
  margin-bottom: 1.8rem;
}

.desc-title,
.achievements-title,
.tech-title {
  color: var(--accent-blue);
  font-size: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.desc-title::before {
  content: '📝';
}

.achievements-title::before {
  content: '🏆';
}

.tech-title::before {
  content: '</>';
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-purple);
}

.desc-text {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
}

.achievements-list {
  list-style: none;
  padding-left: 0;
}

.achievements-list li {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.achievements-list li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--accent-blue);
  font-size: 1.2rem;
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-badge {
  padding: 0.4rem 0.8rem;
  background: rgba(0, 217, 255, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--accent-blue);
  transition: all 0.3s;
}

.tech-badge:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: var(--accent-blue);
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .experience-items {
    margin-left: 4rem;
  }
  
  .timeline-node {
    left: -3.5rem;
  }
}

@media (max-width: 768px) {
  .experience-timeline {
    padding: 1rem 0;
  }
  
  .timeline-line {
    left: 20px;
  }
  
  .experience-items {
    margin-left: 3.5rem;
    gap: 2.5rem;
  }
  
  .timeline-node {
    left: -3rem;
    top: 0.8rem;
    width: 25px;
    height: 25px;
  }
  
  .node-icon {
    width: 25px;
    height: 25px;
    font-size: 0.9rem;
  }
  
  .experience-content {
    padding: 1.5rem;
  }
  
  .exp-company {
    font-size: 1.2rem;
  }
  
  .exp-position {
    font-size: 1rem;
  }
}
</style>
